<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符云图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/query-builder.default.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/bootstrap-datepicker3.min.css"/>

    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/daterangepicker.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/components.min.css"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/assets/css/layout.min.css"/>

    <!-- querybuider -->
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap/dist/css/bootstrap.css" id="bt-theme">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-select/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/chosenjs/chosen.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/node_modules/selectize/dist/css/selectize.bootstrap3.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/query-builder.default.css" id="qb-theme">
    <link rel="stylesheet" href="${re.contextPath}/plugin/querybuilder/css/flags.css">

    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
<#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/js/query-builder.standalone.js"></script>-->
<#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/i18n/query-builder.zh-CN.js"></script>-->
<#--<script type="text/javascript" src="${re.contextPath}/plugin/querybuilder/js/bootstrap-datepicker.min.js"></script>-->
    <!-- querybuider -->
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/jquery/dist/jquery.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/chosenjs/chosen.jquery.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootbox/bootbox.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/selectize/dist/js/standalone/selectize.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/jquery-extendext/jQuery.extendext.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/sql-parser-mistic/browser/sql-parser.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/dot/doT.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/node_modules/interactjs/dist/interact.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/js/query-builder.js"></script>
    <script src="${re.contextPath}/plugin/querybuilder/i18n/query-builder.zh-CN.js"></script>

    <script type="text/javascript" src="${re.contextPath}/plugin/echarts/echarts.js"></script>
    <script src="${re.contextPath}/plugin/echarts/macarons.js"></script>
    <script src="${re.contextPath}/plugin/echarts/echarts-wordcloud.min.js"></script>

    <script type="text/javascript" src="${re.contextPath}/plugin/projects/utils.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/projects/querybuilder.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/projects/tabletools.js"></script>
    <style type="text/css">
        .layui-table-tool{
            z-index: 0!important;
        }
    </style>
</head>

<body>
<div class="lenos-search" style="height: auto;overflow: inherit; padding: inherit; border-bottom: inherit;">
    <div class="select">
        <input hidden="hidden" value="${reportConfig.id}" id="reportId">
        <fieldset class="layui-elem-field" style="height: auto;">
            <legend>过滤器</legend>
            <div class="layui-row" style="margin-top: 5px;">
                <div class="page-toolbar">
                    <div id="dashboard-report-range" class="layui-btn layui-btn-normal" data-container="body" data-placement="bottom" data-original-title="Change dashboard date range">
                        <i class="icon-calendar"></i>&nbsp;
                        <span class="thin uppercase hidden-xs"></span>&nbsp;
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
            <div class="layui-field-box">
                <div class="layui-row">
                    <div class="layui-col-md12" id="builder_div" style="height: auto;">
                    </div>
                </div>
            </div>
            <button id="search" class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
            </button>
        </fieldset>

    </div>

</div>
<div class="layui-row" style="margin-top: 5px;">
    <fieldset class="layui-elem-field">

        <legend>量度图</legend>
        <form class="layui-form layui-form-pane">
            <div class="layui-input-block" style="width: 120px; float: left;">
                <select id="measure" name="measure" lay-verify="required" lay-filter="measure">
                </select>
            </div>
        </form>
        <div id="cloudCharts" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 500px;"></div>
    </fieldset>
</div>
<table id="report" class="layui-hide" lay-filter="reportConfig"></table>

<script>
    var pageData = {
        rpTReport: {
            chartType: null
        },
        reportId: null,
        dsl: null,
        queryBuilderObj: null,
        reportName: null,
        plugin_config: {
            format: 'yyyy-mm-dd',
            todayBtn: 'linked',
            todayHighlight: true,
            autoclose: true
        },
        agentCompanyData: null,
        mediaTypeData: null,
        cols: null
    };
    var form = layui.form;
    form.render();
    var table = layui.table;
    initBuilder('${re.contextPath}');
    var reportId = $("#reportId").val();
    getReportConfigById('${re.contextPath}', reportId);
    var dsl = window.dsl;
    $('#builder').queryBuilder('setRulesFromSQL', dsl);
    /**
     * chart
     */
    function cloudCharts() {
        var dsl = getQueryBuilderDsls();
        if(dsl == null){
            return ;
        }
        var json_sql_where = JSON.parse(dsl);
        var sql_where = json_sql_where.sql;
        var reportId = $("#reportId").val();
        var measure = $("#measure").val();
        var dateRange = window.dateranger;
        $.ajax({
            type : "POST",
            url : "${re.contextPath}/showReport/getCloudChartsData",
            cache : false, //禁用缓存
            data : {
                reportId : reportId,
                dsl : sql_where,
                chartsMeasureId : measure,
                dateRange: dateRange,
            }, //传入组装的参数
            dataType : "json",
            success : function(result) {
                var datas = [];

                for(var i=0 ;i<result.length;i++){
                    var obj={};
                    obj.name=result[i][0];
                    obj.value=result[i][1];
                    obj.textStyle=createRandomItemStyle();
                    datas.push(obj);
                }
                var option = {
                    tooltip: {
                        show: true
                    },
                    series: [{
                        type: 'wordCloud',
                        size: ['200%', '200%'],
                        textRotation : [0, 45, 90, -45],
                        textPadding: 0,
                        autoSize: {
                            enable: true,
                            minSize: 14
                        },
                        data: datas
                    }]
                };

                myChart = echarts.init(document.getElementById('cloudCharts'),'macarons');
                myChart.setOption(option);
                window.onresize = myChart.resize;
            }
        });
    }

    /**
     * table
     */

    function getTableData() {
        var dsl = getQueryBuilderDsls();
        if(dsl == null){
            return ;
        }
        var json_sql_where = JSON.parse(dsl);
        var sql_where = json_sql_where.sql;
        var dateRange = window.dateranger;
        getTableCols('${re.contextPath}');
        table.render({
            elem: '#report'
            , cols: [pageData.cols]
            , loading: true
            , limits: [1000,5000]
            , limit:1000
            , toolbar: "#toolbar"
            , defaultToolbar: ['filter', 'print', 'exports']
            , page: true
            ,totalRow: true
            , data: null
        });
        var reportId = $("#reportId").val();
        $.ajax({
            type: "POST",
            url: "${re.contextPath}/showReport/getTableData",
            data: {
                reportId: reportId,
                dsl: sql_where,
                dateRange: dateRange
            },
            async: true,
            success: function (result) {
                //方法级渲染
                table.render({
                    elem: '#report'
                    , cols: [pageData.cols]
                    , loading: true
                    , limits: [1000,5000]
                    , limit:1000
                    , toolbar: "#toolbar"
                    , defaultToolbar: ['filter', 'print', 'exports']
                    , page: true
                    ,totalRow: true
                    , data: result.data
                });
            }
        });
    }

    $(function () {
        datarangerinit($('#dashboard-report-range'), $('#dashboard-report-range span'));
        showChartMeasure('${re.contextPath}');
        getTableData();
        cloudCharts();
        form.on('select(measure)', function(data){
            cloudCharts();
        });
        $("#search").click(function () {
            cloudCharts();
            getTableData();
        });

    });
</script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/moment.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/daterangepicker.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/morris.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/app.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/assets/js/dashboard.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/projects/dateranger.js"></script>
</body>

</html>
